<!DOCTYPE html>
<html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>修改密码--layui后台管理模板 2.0</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="/resource/common/layui/css/layui.css" media="all"/>
    <link href="/resource/js/bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/resource/js/bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css">
    <link href="/resource/css/table.css" rel="stylesheet" type="text/css">
</head>
<style>
    #product_list .layui-table-body .layui-table-col-special .laytable-cell-1-0-5{
        height: 100px;
    }
</style>
<body style="background-color: #ecf0f5;font-family: 楷体;color: #475059;overflow: auto">
<div class="notice_main" id="product_list">
    <div class="notice_check" style="padding: 16px 15px 8px 15px">
        <p>
            <label class="">商品编号：</label>
            <input type="text" id="uuId" class="find_input" style="width: 150px">
            <label class="">商品名称：</label>
            <input type="text" id="name" class="find_input" style="width: 150px">
            <label class="">上架时间：</label>
            <input type="text" id="createTime" class="find_input" style="width: 150px">
            <label class="">价格：</label>
            <input type="number" id="minPrice" class="find_input" min="0" style="width: 100px">
            <input type="number" id="maxPrice" class="find_input" min="0" style="width: 100px">
        </p>
        <p style="margin-top: 20px">
            <label class="">商品分类：</label>
            <select id="classifyId" name="classify" class="find_input" style="width: 150px">
                <option value="">请选择</option>
                <option th:each="classify:${classifyList}" th:value="${classify.id}"
                        th:text="${classify.name}"></option>
            </select>
            <select id="chdClassId" class="chdClass" class="find_input" style="width: 150px">
            </select>
            <button class="check_btn" id="search">查询</button>

        </p>
    </div>
    <table id="productTables" lay-filter="productTables"></table>
</div>
<script type="text/html" id="operate">
    <a class="toolbarMy" lay-event="edit">编辑</a>
    <a class="toolbarMy" lay-event="del">删除</a>
</script>
<script id="image" type="text/html">
    {{# if(d.imgUrl){ }}
    <img onclick="previewImg(this)" src="{{d.imgUrl}}" style="width: 100px;height: 100px"/>
    {{# } else{ }}
    <span>{{d.img}}</span>
    {{# } }}
</script>
<script type="text/javascript" src="/resource/common/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['table', 'layer', 'laydate', 'form'], function () {
        var table = layui.table,
            $ = layui.$,
            layer = layui.layer,
            laydate = layui.laydate,
            form = layui.form;
        laydate.render({
            elem: '#createTime'
            , type: 'datetime'//指定元素
            , range: '~' //或 range: '~' 来自定义分割字符
        });
        table.render({
            elem: '#productTables'
            , url: '/product/productTable.do' //数据接口
            , method: 'get'
            , page: true //开启分页
            , id: 'tableId'
            , limits: [10, 15, 30]
            , limit: 15
            , cols: [
                [ //表头
                    {field: 'uuId', title: '商品编号'}
                    , {field: 'name', title: '名称'}
                    , {field: 'price', title: '价格'}
                    , {field: 'discount', title: '折扣'}
                    , {field: 'vipPrice', title: '会员价'}
                    , {title: '图片', templet: '#image'}
                    , {field: 'inventories', title: '库存'}
                    , {field: 'parameter', title: '参数'}
                    , {field: 'createTime', title: '上架时间'}
                    , {field: 'classifyName', title: '商品分类'}
                    , {title: '操作', toolbar: '#operate'}
                ]
            ]
        });
        //搜索
        $('#search').on('click', function () {
            active.reload()
        });
        //监听父分类选择框
        $('#classifyId').change(function () {
            $.ajax({
                url: '/classify/getChdClassifys.do',
                type: 'post',
                data: {'ptId': $('#classifyId').val()},
                dataType: 'json',
                success: function (data) {
                    var htmlStr = "<option value=''>请选择</option>";
                    for (var i = 0; i < data.length - 1; i++) {
                        htmlStr += "<option value='" + data[i].id + "'>" + data[i].name + "</option>"
                    }
                    $("#chdClassId").html(htmlStr);
                }
            })
        })
        //监听工具条
        table.on('tool(productTables)', function (obj) {
            var data = obj.data;
            console.log(data);
            if (obj.event === 'details') {
                //查看详情
            } else if (obj.event === 'del') {
                //删除
                delProduct(data.id);
            } else if (obj.event === "edit") {
                //修改
                location.href = "/product/editProduct.do?id=" + data.id
            }
        });

        //删除函数
        function delProduct(id) {
            layer.confirm('是否删除?', function (index) {
                $.ajax({
                    url: "/product/product.do",
                    type: "post",
                    data: {_method: "DELETE", "id": id},
                    dataType: "json",
                    success: function (result) {
                        if (!result.status) {
                            layer.msg(result.msg, {time: 2000});
                            return false;
                        }
                        layer.msg("删除成功!", {time: 1000});
                        active.reload();
                    }
                });
                layer.close(index);
            })
        }

        active = {
            reload: function () {
                var createTime = $("#createTime").val();
                var name = $("#name").val();
                var uuId = $("#uuId").val()
                var minPrice = $("#minPrice").val()
                var maxPrice = $("#maxPrice").val()
                var classifyId = $("#classifyId").val()
                var chdClassId = $("#chdClassId").val()
                //执行重载
                table.reload('tableId', {
                    url: '/product/productTable.do'
                    , method: 'get'
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        createTime: createTime,
                        name: name,
                        uuId: uuId,
                        minPrice: minPrice,
                        maxPrice: maxPrice,
                        classifyId: classifyId,
                        chdClassId: chdClassId,
                    }
                });
            }
        };

        /**
         * 图片预览
         * @param obj
         */
        window.previewImg = (obj) => {
            var img = new Image();
            img.src = obj.src;
            var height = img.height + 50; //获取图片高度
            var width = img.width; //获取图片宽度
            var imgHtml = "<img src='" + obj.src + "' width='100%' height='100%'/>";
            //弹出层
            layer.open({
                type: 1,
                shade: 0.8,
                offset: 'auto',
                area: ['600px', '600px'],
                shadeClose: true,
                scrollbar: false,
                title: "图片预览", //不显示标题
                content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                cancel: function () {
                    //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
                }
            });
        }
    });
</script>

</body>
</html>